<template>
    <div id="clock">
      <h3>打卡组件</h3>
      <ul class="clearfix">
        <li v-for="(item,index) in clockNav">
          <router-link :to="'/clock/clickDetail?clockId='+index">{{item}}</router-link>
        </li>
      </ul>
    </div>
</template>

<script>
    export default {
        name: "clock",
      data(){
          return{
            clockNav:['history','补卡']
          }
      },
    }
</script>

<style scoped>
  /**{*/
    /*padding: 0;*/
    /*margin: 0;*/
  /*}*/
  h3{
    font-size: 30px;
    font-weight: 400;
    text-align: center;
  }
  ul{
    padding: 0;
    margin: 0;
  }
  ul>li{
    float: left;
    width: 50%;
    height: 40px;
    background-color: mediumpurple;
    list-style: none;
  }
  ul>li a{
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 40px;
    text-decoration: none;
    font-size: 22px;
    color: honeydew;
  }
  .clearfix:before,.clearfix:after{
    content: '';
    display: table;
  }
  .clearfix:after{
    clear: both;
  }
</style>
